<template>
  <div id="slider">
    <!-- footerslider -->
    <div class="playedTime">
      {{ currentTime | timeFormat('second') }}
    </div>
    <div class="play-progress">
      <el-slider
        v-model="playProgress"
        :show-tooltip="false"
        @change="handleChange"
        @input="handleInput"
        ref="sliderRef"
        :disabled="!hasSong"></el-slider>
    </div>
    <div class="duration">{{ duration | timeFormat }}</div>
  </div>
</template>

<script>
import types from 'utils/types.js'
import { throttle, _setInterval } from 'utils'

export default {
  name: 'FooterSlider',
  data () {
    return {
      playProgress: 0,
      sliderThrottle: null,
      isSliding: false,
      isMousedown: false
    }
  },
  created () {
    this._getThrottle()
    this.bindMousedown()
  },
  computed: {
    duration () {
      return (this.$store.state.playInfo.songData && this.$store.state.playInfo.songData.dt) || 0
    },
    currentTime () {
      return this.$store.state.playInfo.currentTime
    },
    changeTime () {
      return Math.floor((this.playProgress / 100) * (this.duration / 1000)) + 1
    },
    hasSong () {
      return this.$store.state.playInfo.songData
    }
  },
  methods: {
    // 1. 处理手动设置滑动条
    handleChange () {
      if (!this.isSliding) return false
      // 设置选取状态为false
      this.isMousedown = false
      // 设置播放器事件
      this.$audio.currentTime = this.changeTime
      // 重新打开计时器
      _setInterval(() => { this.$store.commit(types.ADD_TIMER) }, 1000, this.$timerId)
      this.isSliding = false
    },
    // 2. 处理滑动状态的函数
    handleInput () {
      // 判断是否有歌曲和是否选取了滑块
      if (!this.isMousedown) return false
      // 启动节流函数
      this.sliderThrottle()
      // 提交修改currentTime
      this.$store.commit(types.CHANGE_PROGRESS, this.changeTime)
    },
    // 3. 获取节流函数
    _getThrottle () {
      this.sliderThrottle = throttle(() => {
        // 清空线游计时器 以及 把isSloding设置为true
        clearTimeout(this.$timerId)
        this.isSliding = true
      })
    },
    // 4. 绑定调节进度点击触发函数
    bindMousedown () {
      this.$nextTick(() => {
        this.$refs.sliderRef.$refs.button1.$refs.button.onmousedown = () => {
          this.isMousedown = true
        }
      })
    }
  },
  watch: {
    currentTime () {
      if (this.isSliding) return false
      this.playProgress = Math.floor((this.currentTime / (this.duration / 1000) * 100))
      // 如果当前事件大于总时间
      if (this.currentTime >= this.duration / 1000) {
        this.$audio.currentTime = 0
        this.$store.commit(types.PLAY_END)
        clearTimeout(this.$timerId)
      }
    }
    // playProgress () {
    //   if (this.playProgress === 100) {
    //     this.$store.commit(types.PLAY_END)
    //     this.$audio.currentTime = 0
    //     clearTimeout(this.$timerId)
    //   }
    // }
  }
}
</script>

<style scoped lang="less">
#slider {
  user-select: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 13px;
  .playedTime {
    padding: 0 10px;
  }
  .play-progress {
    flex: 1;
  }
  .duration {
    padding: 0 10px;
  }
}
</style>

<style lang="less">
#slider {
  .el-slider {
    .el-slider__runway {
      background-color: #c2c2c4;
      box-shadow: 0 0 2px 0 #c2c2c4;
      .el-slider__bar {
        background-color: var(--base--color);
      }
      .el-slider__button-wrapper {
        .el-slider__button {
          border: 2px solid #bfbfbf;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: var(--base--color);
          }
        }
      }
    }
  }
}
</style>
